<template>
  <div class="list-tabs bg-white rounded-lg px-5 py-3 items-center gap-4 grid sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5">
    <common-link path="/Best-trending-AI-Tools"
      class="block py-3 text-base rounded-md text-center"
      :class="getClassObj('Best-trending-AI-Tools-month')">
      {{$t('region_topAiMonthly')}}
    </common-link>
    <common-link path="/Best-AI-Tools-Category"
      class="block py-3 text-base rounded-md text-center"
      :class="getClassObj('Best-AI-Tools-Category-category')">
      {{$t('region_topAICategories')}}
    </common-link>
    <common-link path="/Best-AI-Tools-region"
      class="block py-3 text-base rounded-md text-center"
      :class="getClassObj('Best-AI-Tools-region-region')">
      {{$t('region_topAICountries')}}
    </common-link>
    <common-link path="/Best-AI-Tools-Source"
      class="block py-3 text-base rounded-md text-center"
      :class="getClassObj('Best-AI-Tools-Source-source')">
      {{$t('region_topAITraffic')}}
    </common-link>
    <common-link path="/Best-AI-Tools-revenue"
      class="block py-3 text-base rounded-md text-center"
      :class="getClassObj('Best-AI-Tools-revenue')">
      {{$t('region_highRevenue')}}
    </common-link>
  </div>
</template>
<script>
export default {
  name: 'RankListTabs',
  methods: {
    //判断是否是当前页面
    getClassObj(val) {
      if (this.$route.name === val || this.$route.name === `lang-${val}`) {
        return 'px-8 bg-purple-1300 text-white hover:opacity-90'
      } else {
        return 'text-gray-1000 hover:text-purple-1300 hover:bg-gray-100'
      }
    },
  },
}
</script>
<style lang="scss" scoped>
</style>

